<template>
  <div class="home-container">
    <!-- 轮播图 -->
    <div class="carousel-section">
      <el-carousel height="300px" indicator-position="outside">
        <el-carousel-item v-for="item in carouselItems" :key="item.id">
          <div class="carousel-item" @click="playVideo(item)">
            <img :src="item.cover" :alt="item.title" />
            <div class="carousel-overlay">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 推荐视频 -->
    <div class="section">
      <div class="section-header">
        <h2>为你推荐</h2>
        <el-button text type="primary">查看更多</el-button>
      </div>
      <div class="video-grid">
        <VideoCard
          v-for="video in recommendedVideos"
          :key="video.id"
          :video="video"
          @play="playVideo"
        />
      </div>
    </div>

    <!-- 热门电影 -->
    <div class="section">
      <div class="section-header">
        <h2>热门电影</h2>
        <el-button text type="primary">查看更多</el-button>
      </div>
      <div class="video-grid">
        <VideoCard
          v-for="video in hotMovies"
          :key="video.id"
          :video="video"
          @play="playVideo"
        />
      </div>
    </div>

    <!-- 热门电视剧 -->
    <div class="section">
      <div class="section-header">
        <h2>热门电视剧</h2>
        <el-button text type="primary">查看更多</el-button>
      </div>
      <div class="video-grid">
        <VideoCard
          v-for="video in hotTVShows"
          :key="video.id"
          :video="video"
          @play="playVideo"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import VideoCard from '@/components/common/VideoCard.vue'

const router = useRouter()

// 模拟数据
const carouselItems = ref([
  {
    id: 1,
    title: '庆余年 第二季',
    description: '范闲归来，再掀风云',
    cover: '/carousel/1.jpg',
    videoUrl: '/videos/1.mp4'
  },
  {
    id: 2,
    title: '繁花',
    description: '王家卫导演，胡歌主演',
    cover: '/carousel/2.jpg',
    videoUrl: '/videos/2.mp4'
  },
  {
    id: 3,
    title: '三体',
    description: '刘慈欣科幻巨作改编',
    cover: '/carousel/3.jpg',
    videoUrl: '/videos/3.mp4'
  }
])

const recommendedVideos = ref([
  { id: 1, title: '视频标题1', cover: '/covers/1.jpg', duration: '45:30', views: '1.2万' },
  { id: 2, title: '视频标题2', cover: '/covers/2.jpg', duration: '32:15', views: '8.5千' },
  { id: 3, title: '视频标题3', cover: '/covers/3.jpg', duration: '28:45', views: '5.3千' },
  { id: 4, title: '视频标题4', cover: '/covers/4.jpg', duration: '52:10', views: '2.1万' },
  { id: 5, title: '视频标题5', cover: '/covers/5.jpg', duration: '41:20', views: '9.8千' },
  { id: 6, title: '视频标题6', cover: '/covers/6.jpg', duration: '38:55', views: '7.6千' }
])

const hotMovies = ref([
  { id: 7, title: '电影1', cover: '/covers/movie1.jpg', duration: '120:00', rating: '9.2' },
  { id: 8, title: '电影2', cover: '/covers/movie2.jpg', duration: '105:30', rating: '8.8' },
  { id: 9, title: '电影3', cover: '/covers/movie3.jpg', duration: '98:45', rating: '9.0' },
  { id: 10, title: '电影4', cover: '/covers/movie4.jpg', duration: '135:20', rating: '8.5' }
])

const hotTVShows = ref([
  { id: 11, title: '电视剧1', cover: '/covers/tv1.jpg', episodes: 30, current: 15 },
  { id: 12, title: '电视剧2', cover: '/covers/tv2.jpg', episodes: 40, current: 20 },
  { id: 13, title: '电视剧3', cover: '/covers/tv3.jpg', episodes: 24, current: 12 },
  { id: 14, title: '电视剧4', cover: '/covers/tv4.jpg', episodes: 36, current: 18 }
])

const playVideo = (video: any) => {
  router.push({
    path: '/player',
    query: { url: video.videoUrl || video.id }
  })
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.carousel-section {
  margin-bottom: 30px;
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;

    h3 {
      font-size: 24px;
      margin-bottom: 8px;
    }

    p {
      font-size: 16px;
      opacity: 0.9;
    }
  }
}

.section {
  margin-bottom: 30px;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h2 {
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
</style>
